<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form {
            margin: 30px 350px;
        }

        .addLiuyanTable {
            border-collapse: collapse;
            border-radius: 10px;
            box-shadow: 0 0 0 2px cornflowerblue;
            overflow: hidden;
        }

        .addLiuyanTable td, th {
            padding: 6px 10px;
            border: 1px solid cornflowerblue;
            border-collapse: collapse;
        }

        select {
            width: 100px;
            height: 30px;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 14px;
        }

        input[type="text"] {
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        input[type="text"]:focus {
            outline: none;
            border-color: #999999;
        }

        input[type="date"] {
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 14px;
        }

        input[type="date"]:focus {
            outline: none;
            border-color: #999;
        }

        .buttonGroup {
            text-align: center;
            margin-top: 10px;
        }

        textarea {
            padding: 10px;
            height: 20px;
            width: 300px;
            background-color: #f5f5f5;
            resize: none;
            outline: none;
            border-color: transparent;
            border-radius: 10px;
            font-size: 16px;
            transition: all .5s;
        }

        textarea:focus {
            height: 60px;
            width: 300px;
            border: 2px solid cornflowerblue;
            border-radius: 10px;
        }

        .total {
            display: none;
            margin-right: 40px;
            margin-top: 5px;
            margin-bottom: 5px;
            direction: rtl;
            /*从右向左，长度超过限制时向左移动*/
            font-size: 15px;
            color: #999;
            opacity: 0;
            transition: all .5s;
        }

        button {
            padding: 5px 10px;
            margin-right: 20px;
            background-color: cornflowerblue;
            border-radius: 6px;
            border: none;
            color: white;
            font-weight: bold;
            font-size: 15px;
            cursor: pointer;
        }

        button:hover {
            opacity: 50%;
        }
    </style>
</head>
<body>
<form th:action="@{/liuyan/addliuyan}" method="post" th:object="${liuyan}">
    <table width="500" border="1" class="addLiuyanTable">
        <tr>
            <th>用户姓名：</th>
            <td><select name="user.id" th:field="*{user.id}">
                <option th:each="u : ${users}" th:value="${u.id}" th:text="${u.username}"></option>
            </select></td>
        </tr>
        <tr>
            <th>留言标题：</th>
            <td><input type="text" name="title" th:field="*{title}"></td>
        </tr>
        <tr>
            <th>留言内容：</th>
            <td>
                <div>
                    <textarea rows="4" cols="50" name="details" th:field="*{details}"></textarea>
                    <br>
                    <span class="total">总共0/200字</span>
                </div>
            </td>
        </tr>
        <tr>
            <th>留言时间：</th>
            <td><input type="date" name="lydate" th:field="*{lydate}"></td>
        </tr>
    </table>
    <div class="buttonGroup">
        <button type="submit">新增</button>
        <button type="reset" id="reset">重置</button>
    </div>
</form>
</body>
<script>
    const textarea = document.querySelector('textarea')
    const total = document.querySelector('.total')
    const reset = document.querySelector('#reset')

    textarea.addEventListener('focus', function () {
        total.style.display = 'block'
        total.style.opacity = 1
    })

    textarea.addEventListener('blur', function () {
        total.style.display = 'none'
        total.style.opacity = 0
    })

    textarea.addEventListener('input', function () {
        total.innerHTML = `总共${textarea.value.length}/200字`
    })

    reset.addEventListener('click', function () {
        total.innerHTML = '总共0/200字'
    })
</script>
</html>